import popupWindowWrapper from "./popupWindowWrapper.js";
import {buildVueComputedListFromRef} from "../utils.js";

export default {
    components: {
        popupWindowWrapper
    },
    setup() {
        const popup = Vue.ref(null);
        const titleText = Vue.ref("搜索");
        const searchInput = Vue.ref(null);

        function show(titleText_ = "搜索") {
            popup.value.show();
            titleText.value = titleText_;
            Vue.nextTick(() => {
                searchInput.value.focus();
            }).then();
            const clearCallbacks = () => {
                onTextChangeList.value = [(v) => {
                }];
                onClickItemList.value = [(index) => {
                }];
            };
            //回调函数在窗口关闭以前将不断触发，因此需要在窗口关闭的时候情况回调
            popup.onConfirm = clearCallbacks;
            popup.onCancel = clearCallbacks;
            //首次打开也触发
            textChange({target: {value: ''}});
        }

        const [onConfirm, onCancel,
            confirmBtnText, cancelBtnText,
            widthInParent, heightInParent] =
            buildVueComputedListFromRef(popup, ['onConfirm', 'onCancel',
                'confirmBtnText', 'cancelBtnText',
                'widthInParent', 'heightInParent']);
        // Vue.onMounted(() => {
        //     widthInParent.value = 80;
        //     heightInParent.value = 80;
        //     popup.value.show();
        // });
        const itemList = Vue.ref([]);
        const noItemText = Vue.ref("暂无搜索结果");

        // for (let i = 0; i < 100; i++) {
        //     let str = (Math.random() * 1e40).toString(36).slice(Math.ceil(Math.random() * 20));
        //     itemList.value.push(str);
        // }

        const onTextChangeList = Vue.ref([(v) => {
        }]);

        const onTextChange = Vue.computed({
            set(f) {
                onTextChangeList.value.push(f);
            },
        })

        function textChange(e) {
            // console.log(e.target.value);
            for (let f of onTextChangeList.value) {
                f(e.target.value);
            }
        }

        const onClickItemList = Vue.ref([(index) => {
        }]);

        const onClickItem = Vue.computed({
            set(f) {
                onClickItemList.value.push(f);
            },
        })

        function clearOnClickItemCallBack() {
            onClickItemList.value = [];
        }

        function clickItem(index) {
            // console.log(index);
            for (let f of onClickItemList.value) {
                f(index);
            }
            clearOnClickItemCallBack();
        }

        function hide() {
            popup.value.hide();
        }

        return {
            show, titleText, popup,
            onConfirm, onCancel,
            confirmBtnText, cancelBtnText,
            widthInParent, heightInParent,
            itemList, noItemText, searchInput,
            textChange, onTextChange, clickItem,
            onClickItem, hide, clearOnClickItemCallBack
        };
    },
    template: `
<popupWindowWrapper ref="popup">
    <div class="popup-info-content" style="height: 100%">
        <p class="my-font" style="font-size: 30px;">
            {{ titleText }}
        </p>
        <input type="text" class="my-font" style="font-size: 24px;width: 60%;"
         ref="searchInput" @input="textChange">
        <div style="height: 25px"></div>
        <div style="overflow-y: scroll;font-size: 24px;max-height: 70%;">
            <p class="my-font" style="font-size: 30px;"
             v-show="itemList.length === 0">
                {{ noItemText }}
            </p>
            <ul style="margin-left: 18%;margin-right: 18%;">
                <li style="cursor: pointer;"
                v-for="(item, index) in itemList" @click="clickItem(index)">{{item}}</li>
            </ul>
        </div>
    </div>
</popupWindowWrapper>`,
}